/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-08-15 13:27:33
 * @LastEditTime : 2023-08-23 16:35:11
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Pages\Front\jtgj\Other\ThrA01.jsx
 * @Description  :
 */

import { Progress } from 'antd'
import { useState } from 'react'
import { useEventEmitter, useRequest } from 'ahooks'
import { CommonSmallTitle } from '../Assets/Common/SmallTitle'
import { ProjectListTem, ChartsDat } from '../Template'
import { Gauge } from '@ant-design/plots'
import { ProjectMap001 } from '../Assets/Template/ProjectMap'

import { project } from '../../../Common/Data'
import { Http } from '../../../Common/Api'
import { FrontModalBox } from '../Assets/Modal'
const { imageUrl } = project[window.location.hostname]

export const ThrA01 = () => {
    const { runAsync: getOne } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setDataOne(res[0])
            const [{ dCount, jdCount, ybCount, zdCount }] = res
            const number = dCount + jdCount + ybCount + zdCount
            setDataOneNumber(number)
        },
    })

    const { runAsync: getTwo } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            console.log(res)
            const { handledCount, handlingCount, lateNum, notOkCount, okCount, submittedCount } = res
            const one = handlingCount + notOkCount + okCount + handledCount + submittedCount
            const two = handlingCount + notOkCount + okCount
            const thr = handledCount + submittedCount
            setDataThr({ one, two, thr })
            setDataPer(two / one || 0)
            setDataFou(lateNum)
        },
    })

    const { runAsync: getThr } = useRequest(Http, { manual: true, onSuccess: res => setDataTwo(res[0]) })

    const ListOne = [
        { uuid: 1, label: '重大风险', value: 'zdCount', img: 'Waring001.png' },
        { uuid: 2, label: '较大风险', value: 'jdCount', img: 'Waring002.png' },
        { uuid: 3, label: '一般风险', value: 'ybCount', img: 'Waring003.png' },
        { uuid: 4, label: '较低风险', value: 'dCount', img: 'Waring004.png' },
    ]

    const [DataOne, setDataOne] = useState()

    const ListTwo = [
        // { uuid: 1, label: '培训次数', value: 'zdCount', img: 'SixOne012.png' },
        // { uuid: 2, label: '培训人次', value: 'personCount', img: 'SixOne013.png' },
        { uuid: 1, label: '培训次数', value: 3, img: 'SixOne012.png' },
        { uuid: 2, label: '培训人次', value: 185, img: 'SixOne013.png' },
    ]

    const ListThr = [
        // { uuid: 1, label: '下单数', value: 'one', img: 'SixOne009.png' },
        // { uuid: 2, label: '已整改', value: 'two', img: 'SixOne010.png' },
        // { uuid: 3, label: '未整改', value: 'thr', img: 'SixOne011.png' },
        { uuid: 1, label: '下单数', value: 165, img: 'SixOne009.png' },
        { uuid: 2, label: '已整改', value: 160, img: 'SixOne010.png' },
        { uuid: 3, label: '未整改', value: 5, img: 'SixOne011.png' },
    ]

    const [DataTwo, setDataTwo] = useState()
    const [DataThr, setDataThr] = useState()
    const [DataPer, setDataPer] = useState(0)
    const [DataFou, setDataFou] = useState(0)
    const [DataOneNumber, setDataOneNumber] = useState(0)
    const [OptionsCall, setOptionsCall] = useState()

    const ClickOne = uuid => {
        const TypeList = {
            1: {
                type: 'TableList',
                data: {
                    title: '重大风险',
                    type: 'riskOne',
                    uuid: '9c256a7d-ae64-4fcc-a4bc-7edff75599f3',
                    OrganizationUuid: Active,
                },
            },
            2: {
                type: 'TableList',
                data: {
                    title: '较大风险',
                    type: 'riskOne',
                    uuid: 'a17b2c16-668e-4449-b793-1487ba698e77',
                    OrganizationUuid: Active,
                },
            },
            3: {
                type: 'TableList',
                data: {
                    title: '一般风险',
                    type: 'riskOne',
                    uuid: 'b75a2f2f-e107-459a-a331-35bd9924a2b7',
                    OrganizationUuid: Active,
                },
            },
            4: {
                type: 'TableList',
                data: {
                    title: '较低风险',
                    type: 'riskOne',
                    uuid: '4d3fd238-6473-429a-a1ab-8f35c6af97ab',
                    OrganizationUuid: Active,
                },
            },
        }
        if (TypeList[uuid]) {
            setOptionsCall(TypeList[uuid])
        }
    }

    const [Active, setActive] = useState()
    const ActiveEvent = useEventEmitter()
    ActiveEvent.useSubscription(val => {
        setActive(val)
        MapClickEvent.emit({
            data: { uuid: val, url: 'getJTGJSuperviseList', classDiv: 'TemplateMapDiv005' },
            type: 'Supervise',
        })
    })

    const MapClickEvent = useEventEmitter()
    MapClickEvent.useSubscription(val => {
        if (val.type === 'Supervise') {
            getOne({ url: 'getJTGJSuperviseTypeList', data: { OrganizationUuid: val.data.uuid } })
            getTwo({ url: 'getJTGJStatByOrganization', path: [val.data.uuid] })
            getThr({ url: 'getSecurityActivityStatistics', data: { OrganizationUuid: val.data.uuid } })
        }
    })

    return (
        <>
            <ProjectMap001 sceneId={'3d5665fc-ed3f-4c08-b596-c1aed082fb04'} MapClickEvent={MapClickEvent} />
            <div className="left">
                <ProjectListTem type={1} ActiveEvent={ActiveEvent} />
            </div>
            <div className="right">
                <CommonSmallTitle title="风险点总计(个)" style={{ marginBottom: 16 }}>
                    <div className="one">
                        <div>
                            {ListOne.map(({ uuid, label, value, img }) => (
                                <div key={uuid} onClick={() => ClickOne(uuid)}>
                                    <img src={imageUrl + img} alt="" />
                                    <div>{label}</div>
                                    <div>{DataOne ? DataOne[value] : 0}</div>
                                </div>
                            ))}
                        </div>
                        <div
                            onClick={() => {
                                setOptionsCall({
                                    type: 'TableList',
                                    data: {
                                        title: '风险统计',
                                        type: 'riskOne',
                                        OrganizationUuid: Active.data.uuid,
                                    },
                                })
                            }}
                        >
                            风险点总计 <span>{DataOneNumber}</span>
                        </div>
                    </div>
                </CommonSmallTitle>
                <CommonSmallTitle title="人员培训" style={{ marginBottom: 16 }}>
                    <div
                        className="two"
                        onClick={() => {
                            setOptionsCall({
                                type: 'TableList',
                                data: {
                                    title: '人员培训详情',
                                    OrganizationUuid: Active,
                                    type: 'JTGJSecurityActivityTables',
                                },
                            })
                        }}
                    >
                        {ListTwo.map(({ uuid, label, value, img }) => (
                            <div className="list" key={uuid}>
                                <img src={imageUrl + img} alt="" />
                                <div>{label}</div>
                                {/* <div>{DataTwo ? DataTwo[value] : 0}</div> */}
                                <div>{value}</div>
                            </div>
                        ))}
                        <Progress
                            trailColor="rgba(1, 129, 153, 1)"
                            strokeColor="rgba(255, 251, 80, 1)"
                            type="circle"
                            size={150}
                            strokeWidth={16}
                            percent={DataTwo?.per || 0}
                            format={() => (
                                <div className="ChartsBox">
                                    <div>{DataTwo?.per || 0}%</div>
                                    <div>覆盖率</div>
                                </div>
                            )}
                        />
                    </div>
                </CommonSmallTitle>
                <CommonSmallTitle title="隐患统计(件）">
                    <div className="thr">
                        <div>
                            <Gauge
                                {...ChartsDat({
                                    size: { width: 200, height: 100 },
                                    // percent: DataPer,
                                    percent: 160 / 165,
                                })}
                            />
                            <div>
                                {ListThr.map(({ uuid, label, value, img }) => (
                                    <div
                                        key={uuid}
                                        onClick={() => {
                                            setOptionsCall({
                                                type: 'TableList',
                                                data: {
                                                    uuid,
                                                    title: '隐患统计',
                                                    OrganizationUuid: Active,
                                                    type: 'SecondaryInspectionTemplate',
                                                },
                                            })
                                        }}
                                    >
                                        <img src={imageUrl + img} alt="" />
                                        <div>{label}</div>
                                        {/* <div>{DataThr ? DataThr[value] : 0}</div> */}
                                        <div>{value}</div>
                                    </div>
                                ))}
                            </div>
                        </div>
                        <div
                            onClick={() => {
                                setOptionsCall({
                                    type: 'JTGJThrDataFou',
                                    data: { title: '隐患统计' },
                                })
                            }}
                        >
                            {/* 本月逾期 <span>{DataFou}</span> */}
                            本月逾期 <span> 5 </span>
                        </div>
                    </div>
                </CommonSmallTitle>
            </div>
            <FrontModalBox OptionsCall={OptionsCall} />
        </>
    )
}
